<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="/html/css/homestyle.css" media="screen"/>
	<link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
	<link rel='stylesheet' href='/html/css/slider_multiple.css' />  
	<script type="text/javascript" src="/html/javascript/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="/html/javascript/votingSystem.js"></script>
	<script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-42088406-1']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>
	<title>Piczul</title>
	<link rel="shortcut icon" href="/html/resources/favicon.ico" />
</head>
<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=288429591168346";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
	<div class="navbar">
		
		
		<div id="icons">
			<a href="/">
		<h1>Pic<span>zul</span></h1></a>
			<a href="/create"><div id="newpost">New Post</div></a>
			<!--  div id="socialButons">
				<a href="https://www.facebook.com/"  target="_blank"><img class="facebook" src="/html/resources/facebook.png"></a>
				<a href="https://plus.google.com/" target="_blank"><img class="googlePlus" src="/html/resources/gplus.png"></a>
				<a href="https://twitter.com/" target="_blank"><img class="twitter" src="/html/resources/twitter.png" ></a>
			</div-->
		</div>
	</div>
	<div id="container">
	<div class="allPosts">
	   	<#list userPosts as userPost>
		<div class="post">
				<div class="content">
					<h2>${userPost.title}</h2>
					<p id="username">Submitted by ${userPost.userName}</p>
					<a href="/post/${userPost.id}">
						<img src="/Image/${userPost.blobId}">
					</a>
					<#if userPost.voteType??>
						<#if userPost.voteType == true>
							<div id="votebuttons">
								<button class="vote up" id="upvote_${userPost.id}" type="button" style="opacity: 0.4;" disabled><img src="/html/resources/upwhite.png" alt="" /></button>
								<p class="numvotes" id="voteTotal_${userPost.id}">${userPost.votes}</p>
								<button class="vote down" id="downvote_${userPost.id}" type="button" ><img src="/html/resources/downwhite.png" alt="" onload="javascript:loadColour(${userPost.id})"/></button><br>
								<div class="fb-like" data-href="http://www.piczul.com/post/${userPost.id}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
							</div>
						<#else>
							<div id="votebuttons">
								<button class="vote up" id="upvote_${userPost.id}" type="button"><img src="/html/resources/upwhite.png" alt="" /></button>
								<p class="numvotes" id="voteTotal_${userPost.id}">${userPost.votes}</p>
								<button class="vote down" id="downvote_${userPost.id}" type="button" style="opacity: 0.4;" disabled><img src="/html/resources/downwhite.png" alt="" onload="javascript:loadColour(${userPost.id})"/></button><br>
								<div class="fb-like" data-href="http://www.piczul.com/post/${userPost.id}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
							</div>
						</#if>
					<#else>
						<div id="votebuttons">
							<button class="vote up" id="upvote_${userPost.id}" type="button"><img src="/html/resources/upwhite.png" alt="" /></button>
							<p class="numvotes" id="voteTotal_${userPost.id}">${userPost.votes}</p>
							<button class="vote down" id="downvote_${userPost.id}" type="button"><img src="/html/resources/downwhite.png" alt="" onload="javascript:loadColour(${userPost.id})"/></button><br>
							<div class="fb-like" data-href="http://www.piczul.com/post/${userPost.id}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
						</div>
					</#if>
				</div>
				
				
		</div>
		
		
		
	 	</#list>
	 	<div id="clear"></div>
	 	<div id="botAdd">
			<script type="text/javascript">
				ch_client = "ciarangeorge";
				ch_width = 523;
				ch_height = 120;
				ch_type = "mpu";
				ch_sid = "Chitika Default";
				ch_color_site_link = "0000CC";
				ch_color_title = "0000CC";
				ch_color_border = "FFFFFF";
				ch_color_text = "000000";
				ch_color_bg = "FFFFFF";
				</script>
				<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
			</script>
		</div>
	 	<!-- Make this work with divs on the outside ! -->
	 	<div id="prevandnext">
		    <!-- Needs to be greyed out instead -->
		    <#if pageNum != 1>
		    	<a id="prev" href="/page/${pageNum-1}"><div id="prevButton">Previous</div></a>
		    <#else>	
		    	<a id="prev" href="/page/${pageNum-1}"onclick="event.preventDefault();"><div id="prevButton" style="opacity: 0.4;">Previous</div></a>
		    </#if>
		    
		    <#if lastPage>
		    	<a id="prev" href="/page/${pageNum-1}"onclick="event.preventDefault();"><div id="nextButton" style="opacity: 0.4;">Next</div></a>
		    <#else>
			    <a id="prev" href="/page/${pageNum+1}"><div id="nextButton" >Next</div></a>
		    </#if>

	  </div>
	</div>
	
	<div class="rightNav">
		<div id="rules">
		<p><strong>Hello Piczul users!</strong> Welcome to the site that allows you to share fun and laughter with other users from allover the world. Please abide by the rules stated below to keep visits to this site fun and friendly for users of all ages:</p>
		<ol>
			<li>Do <strong>not</strong> post adult content which includes, but is not restricted to, nudity, pornography and gore. </li>
			<li>Do <strong>not</strong> post any pictures containing personal information.</li>
		</ol>
		</div>
		<div id=seperator></div>
		<script type="text/javascript">
			ch_client = "ciarangeorge";
			ch_width = 250;
			ch_height = 250;
			ch_type = "mpu";
			ch_sid = "Chitika Default";
			ch_color_site_link = "0000CC";
			ch_color_title = "0000CC";
			ch_color_border = "FFFFFF";
			ch_color_text = "000000";
			ch_color_bg = "FFFFFF";
			</script>
			<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
		</script>
		<div id=seperator></div>
		<div id="topPosts">
		<p><strong>View our top posts!</strong></p>
		
			<div id='my_carousel_ct' class='carousel-container'>  
		      <div id="my_carousel_1" class="carousel slide">
		        <!-- Carousel items -->
		        <div id="my_carousel_2" class="carousel-inner rs-slider">
		        <#assign x = 1>
		        <#list topPosts as topPost>
			        <#if pageNum == 1>
			          	<div class="item active">
				            <div class="ts_border">
				            	<a href="/post/${topPost.id}">
				              	<img src="/Image/${topPost.blobId}">
				              	<div class="carousel-caption">
				                	<h4>${topPost.title}</h4>
				                  	<p class="ts_txt">
				                    	<p>${topPost.title}</p>
				                  	</p>
				              	</div>
				              	</a>
				            </div>
				          </div>
				     <#else>	
						<div class="item">
				            <div class="ts_border">
				            <a href="/post/${topPost.id}">
				              <img src="/Image/${topPost.blobId}">
				              <div class="carousel-caption">
				                <h4>${topPost.title}</h4>
				                  <p class="ts_txt">
				                    <p>${topPost.title}/p>
				                  </p>
				              </div>
				              </a>
				            </div>
				          </div>
				    </#if>
			   	<#assign x = x + 1>
		        </#list>                          
		        </div>      
		        <!-- Carousel nav -->
		        <a class="carousel-custom" href="#my_carousel_1" data-slide="prev">&lsaquo;</a>
		        <a class="carousel-custom" href="#my_carousel_1" data-slide="next">&rsaquo;</a>
		      </div>	
		    </div>
				<!--<div id="advertside">
				<img src="/html/resources/mediumrectad.png" alt=""/>
				</br>
				<img src="/html/resources/mediumrectad.png" alt=""/>
				</div> -->
			</div>
			<div id=seperator></div>
			<div id="adRef">
				<a href="http://www.chitika.com/publishers/apply?refid=ciarangeorge"><img src="http://images.chitika.net/ref_banners/250x250_using_adsense.gif" /></a>
			</div>
			</div>
		</div>
	
	<footer>
	</footer>
    <script type='text/javascript' src='/html/javascript/wpts_slider_multiple.js'></script>
    <script>
      jQuery(document).ready(function(e) {
         jQuery('#my_carousel_ct').tsSlider({
           thumbs:''
          , width:'100%'
          , showText: false 
          , autoplay:3000
          , imgWidth: 100
          , imgHeight: 100
          , imgMarginTop: 0
          , imgMarginLeft: 0
          , squared: true 
          , textSquarePosition: 4 
          , textPosition: 'top'
          , imgAlignment: 'Center'
          , textColor: 'F00'
          , skin: 'transparent'
          , arrows:'ts-arrow-1'
          , sliderHeight: 200 
          , effects:'fade'
					, titleBold: 'false'
					, titleItalic: 'false'
					, textBold: 'true' 
					, textItalic: 'false' 
					, textWidth: 90
          , background_sld:'#FFF'
          , background_caption:'#000'
         });		
      });
    </script>
</body>
</html>